<template>
  <h1 class="text-2xl lg:text-3xl font-bold mb-4 text-center mt-4">{{ videoInfo.title }}</h1>
  <div class="lg:w-2/3 mx-auto mt-8">
    <video :src="videoInfo.video_url" controls class="w-full aspect-video object-contain bg-black" width="343" height="192" controlslist="nodownload"></video>
  </div>
</template>

<script setup>
const route = useRoute();
const { data: result } = await useAsyncData("videoInfo", () => {
  return useFetch("/api/video/details", { params: { v_id: route.params.v_id } }).then((res) => res.data.value);
});
console.log("接口返回", result.value);
const videoInfo = result.value.data;
</script>
<style scoped lang="scss"></style>
